<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import {onBeforeUnmount, onMounted} from "vue";
import {Ion, Viewer, Terrain} from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "cesium";

// 服务器上托管 CesiumJS 静态文件的 URL。
window.CESIUM_BASE_URL = '/Cesium';
// 您的访问令牌可在以下位置找到：https://ion.cesium.com/tokens。
// 将“your_access_token”替换为您的铯离子访问令牌。
Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjJhZWE3NC1iYjY2LTQwZjAtODc0YS0zZTdlMjRmNTE5ZDEiLCJpZCI6MjA1NjY1LCJpYXQiOjE3MTE5MzExMzB9.efKdT634nrROZLOR-GmU5gvPmnlCDsiHDTkCYlU4SXA';
// Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.


/* 创建视图（查看器） */
async function createViewer() {
  const viewer = new Viewer('cesiumContainer', {
    animation: false, // 隐藏左下角动画部件
    timeline: false, // 隐藏底部时间轴部件
    fullscreenButton: false, // 隐藏右下角全屏按钮部件
    // creditDisplay: false, // 隐藏屏幕和灯箱中显示的制作人员名单。
    geocoder: false, // 隐藏右上角搜索按钮部件
    homeButton: false, // 隐藏右上角 Home 按钮部件
    sceneModePicker: false, // 隐藏右上角场景模式按钮部件
    baseLayerPicker: false, // 隐藏右上角图层选择按钮部件
    navigationHelpButton: false, // 隐藏右上角帮助按钮部件
    vrButton: true, // 显示右下角 VRButton 按钮部件
    // selectionIndicator: false, // 隐藏点击要素之后显示的选择指示器
    // infoBox: false, // 隐藏点击要素之后显示的信息框
    // skyBox: false, // 天空盒，取消默认天空盒、太阳、月亮
    // skyAtmosphere: false, // 天空大气层，取消大气层效果 蔚蓝的天空，以及地球边缘的光芒
    // globe: false, // 要在场景中使用的地球仪。如果设置为 false ，则不会添加任何地球仪，并且默认情况下将隐藏天空大气层。
    // projectionPicker: true, // 显示右上角投影选择按钮部件
    // 所有地形提供商 - https://cesium.com/learn/cesiumjs/ref-doc/?classFilter=TerrainProvider
    terrain: Terrain.fromWorldTerrain({
      requestVertexNormals: true, // 请求其他照明信息
      requestWaterMask: true, // 请求每个磁贴的水掩码
    })
  });
  console.log('视图查看器：', viewer);
  // 启用光照
  // viewer.scene.globe.enableLighting = true;
  // 隐藏底部 Cesium logo 与 attribution 标注信息部件
  viewer.bottomContainer.style.display = 'none'
  return viewer;
}

/* 控制相机 */
function controlCamera(viewer) {
  // 相机飞向某个位置
  /*viewer.camera.flyTo({
    // 目的地
    destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
    // 朝向 - 这里的航向、俯仰和滚动分别是相对于东、北和上。
    orientation: {
      // 航向角
      heading: Cesium.Math.toRadians(0.0), // 方向
      // 俯仰角
      pitch: Cesium.Math.toRadians(-90), // 倾斜角度
      // 翻滚角
      roll: 0.0 // 滚动角度
    },
    // 飞行的持续时间（以秒为单位）。如果省略，Cesium 会尝试根据飞行的飞行距离计算理想的持续时间。
    duration: 1
  })*/

  // 相机飞向某个资源 - Entity, EntityCollection, DataSource, Cesium3DTilset ...
  /*const west = -90.0;
  const south = 38.0;
  const east = -87.0;
  const north = 40.0;
  const rectangle = viewer.entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(west, south, east, north),
    },
  });
  viewer.flyTo(rectangle);*/

  // 创建缓动函数 - easingFunction
  /*viewer.camera.flyTo({
    destination: new Cesium.Cartesian3(
        -3961951.575572026,
        3346492.0945766014,
        3702340.5336036095
    ),
    orientation: {
      direction: new Cesium.Cartesian3(
          0.8982074415844437,
          -0.4393530288745287,
          0.013867512433959908
      ),
      up: new Cesium.Cartesian3(
          0.12793638617798253,
          0.29147314437764565,
          0.9479850669701113
      ),
    },
    complete: function () {
      // 1s 后飞行到另外一个位置
      setTimeout(function () {
        viewer.camera.flyTo({
          destination: new Cesium.Cartesian3(
              -2304817.2435183465,
              -3639113.128132953,
              4688495.013644141
          ),
          orientation: {
            direction: new Cesium.Cartesian3(
                0.3760550186878076,
                0.9007147395506565,
                0.21747547189489164
            ),
            up: new Cesium.Cartesian3(
                -0.20364591529594356,
                -0.14862471084230877,
                0.9676978022659334
            ),
          },
          easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
          duration: 5,
        });
      }, 1000);
    },
  });*/

  // 相机锁定到某个点 - lookAtTransform
  const center = Cesium.Cartesian3.fromRadians(
      2.4213211833389243,
      0.6171926869414084,
      3626.0426275055174
  );
  const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
  viewer.scene.camera.lookAtTransform(
      transform,
      new Cesium.HeadingPitchRange(0, -Math.PI / 4, 2900)
  );
  // 绕此点运行
  viewer.clock.onTick.addEventListener(function (clock) {
    viewer.scene.camera.rotateRight(0.001);
  });
  // 屏幕空间摄像机控制器 - screenSpaceCameraController
  // 禁用相机碰撞及不允许其进入地下
  viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
  // viewer.scene.screenSpaceCameraController.enableRotate = false; // 禁用相机旋转
  // viewer.scene.screenSpaceCameraController.enableTranslate = false; // 禁用相机平移
  // viewer.scene.screenSpaceCameraController.enableZoom = false; // 禁用相机缩放
  // viewer.scene.screenSpaceCameraController.enableTilt = false; // 禁用相机倾斜
  // viewer.scene.screenSpaceCameraController.enableLook = false; // 禁用相机视角

  // 按键控制示例 - https://sandcastle.cesium.com/?src=Camera%20Tutorial.html
}

onMounted(async () => {
  let viewer = await createViewer();
  controlCamera(viewer)
})

onBeforeUnmount(() => {
})
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
